<template>
	<view class="membership_box">
		<view class="topPart cardF">
			<view class="dataBox dpflxr ">

				<view class="dataItem dpflxc">
					<text class="num">{{registerday1}}</text>
					<text class="title">今日注册会员</text>
				</view>
				<view class="dataItem dpflxc">
					<text class="num">{{registermonth1}}</text>
					<text class="title">月累计注册会员</text>
				</view>
				<view class="dataItem dpflxc">
					<text class="num">{{consumptionday1}}</text>
					<text class="title">今日消费会员</text>
				</view>
				<view class="dataItem dpflxc">
					<text class="num">{{consumptionmonth1}}</text>
					<text class="title">月累计消费会员</text>
				</view>

			</view>
			<view class="dpflxrjb wp">
				<view class="searchBox2  dpflxr" >
				      <view class="icon">
				          <image src="../../static/images/icon_search.png"></image>
				      </view>
				      <input class="inputBox" type="text"  @confirm="search" confirm-type="search" placeholder="输入手机号或姓名"
				          placeholder-style="font-size:24rpx; line-height:60rpx;color:#999;"></input>
				  </view>
				  <view class="filter dpflxr" v-on:tap="click">
				  	<text>筛选</text>
				  	<view class="icon">
						<image src="../../static/images/icon_sx.png"></image>
					</view>
				  </view>
			</view>
		</view>

	<view v-for="items in records" >
		<view class="userInfo w card" @click="details(items.userId)">
			<view  hover-class="none" class="title_box4">
			<!-- <navigator url="`../index_membership_detail/index_membership_detail?userId={items.userId}`" hover-class="none" class="title_box4"> -->
			    <view class="tb_left">
					<!-- https://babybear-fx.oss-cn-shenzhen.aliyuncs.com/VIPxcx/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%9B%BE%E7%89%87/img_bg.jpg -->
			        
						<view v-if="items.avatar==null">
							<view class="icon">
							<image src="../../static/images/img11.png" mode="aspectFill"></image>
							</view>
						</view>
						<view v-else>
							<view class="icon">
							<image :src="items.avatar" mode="aspectFill"></image>
							</view>
						</view>
			            
			        
			        <view class="words dpflxr">
			            <text class="name">{{items.userName}}</text>
			            <view class="icon">
							
								<image :src="items.userSex==1?'../../static/images/icon_nv.png':'../../static/images/icon_nan.png'"></image>
							
<!-- 								<view v-if="items.userSex==1">
									<image src="../../static/images/icon_nan.png"></image>
								</view>
								<view v-else>
									<image src="../../static/images/icon_nv.png"></image>
								</view> -->
			                <!-- <image src="../../static/images/icon_nan.png"></image> -->
							<!-- <image src="../../static/images/icon_nv.png"></image> -->
			            </view>
			        </view>
			    </view>
			    <view class="number dpflxr">
			        <text>{{items.mobile}}</text>
					<view class="rightArrow"></view>
			    </view>
			<!-- </navigator> -->
			</view>
			<view class="dpflxrjb">
				<view class="ifItem">
					<text class="title">注册日期:</text>
					<text>{{items.registerAt}}</text>
				</view>
				<view class="ifItem">
					<text class="title">消费日期:</text>
					<text>{{items.latestComsumeTime}}</text>
				</view>
				<view class="ifItem">
					<text class="title">消费大类:</text>
					<text>{{items.cosumeCategory}}</text>
				</view>
				<view class="ifItem">
					<text class="title">宝宝年龄段:</text>
					<text>1-3岁</text>
				</view>
			</view>
		</view>
		</view>
		<!-- shadowLayer -->
		<view class="shadowLayer" v-on:tap="hideModel" v-show="showModalStatus"></view>
		<!-- popupWindow  -->
		<transition name="animationData">
			<view :animation="{animationData}" class="popupWindow" v-show="showModalStatus">
				<view class="dpflxrjb title_box wp">
					<text class="title">筛选</text>
					<text class="close" v-on:tap ="hideModel">关闭</text>
				</view>
				<view class="title_box2 wp">
					<text class="title">注册日期</text>
				</view>
				<view class="dpflxrjb wp">
					<picker class="short picker pos_rel" mode="date"   @change="bh456">
						<view>{{index456}}</view>
						<view class="downArrow pos_abs"></view>
					</picker>
					<text>-</text>
					<picker class="short picker pos_rel" mode="date"   @change="bh789">
						<view>{{index789}}</view>
						<view class="downArrow pos_abs"></view>
					</picker>
				</view>

				<view class="title_box2 wp">
					<text class="title">消费大类</text>
				</view>
<!-- 				<view v-for="item in consumption_list" class="w picker pos_rel">
					<view>{{item.categoryName}}</view>
					<view class="downArrow pos_abs"></view>
				</view> -->
                 <picker class="w picker pos_rel" mode="selector" :value="index" :range-key="'categoryName'" :range="consumption_list" @change="consumptionChange">
                      <view>{{consumption_list[index].categoryName}}</view>
                 </picker>

				<view class="btn_box5" @click="confirm">
					<text>确认</text>
				</view>
			</view>
		</transition>
		
	</view>
</template>

<script>
	import request from "@/api/index.js";
	export default {
		data() {
			return {
				index:0,
				registerDate:['请选择','2021-08-19','2021-08-20'],
				showModalStatus:false,
				animationData:null,
				records:[],
				registerday1:0,
				registermonth1:0,
				consumptionday1:0,
				consumptionmonth1:0,
				index456: '',
				index789: '',
				categoryId:'',
				consumption_list:[],
				content:''
			}
		},
		
		onLoad() {
			//console.log(getStorage());
			this.ces();
			this.registertoday();
			this.registermonth();
			this.consumptiontoday();
			this.consumptionmonth();
			
			this.consumption_type();//消费大类
		},

		methods: {
			ces: function(e) {
				// request.http('/shop/store-api/'+ uni.getStorageSync('shop_id') +'/frontUserinfo/page', 'GET', '', '数据加载中...').then(res => {
				// 	console.log(res);
				// })
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/page', 'POST').then(res => {
					console.log(res.data.data.records);
					this.records=res.data.data.records;
				})
				
			},
			
			registertoday: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/registerByToday', 'POST').then(res => {
					// console.log(res.data.data);
					this.registerday1=res.data.data;
				})
				
			},
			registermonth: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/registerByToMonth', 'POST').then(res => {
					// console.log(res.data.data);
					this.registermonth1=res.data.data;
				})
				
			},
			consumptiontoday: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/consumptionByToday', 'POST').then(res => {
					// console.log(res.data.data);
					this.consumptionday1=res.data.data;
				})
				
			},
			consumptionmonth: function(e) {
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/consumptionByToMonth', 'POST').then(res => {
					// console.log(res.data.data);
					this.consumptionmonth1=res.data.data;
				})
				
			},
			
			details(id) {
				uni.navigateTo({
					url:"../index_membership_detail/index_membership_detail?userId="+id,
				});
			},
			
			
			consumption_type: function(e) {
				request.http('/shop/api/categories', 'GET').then(res => {
					// console.log(res.data.data);
					this.consumption_list=res.data.data;
				})
				
			},
			
			search(e) {
			console.log(e.detail.value);
			this.content=e.detail.value;
			
			var customerMobile=this.content;
			var customerName=this.content;

			request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/page', 'POST',{
				'current':1,
				'customerMobile': customerMobile,
				'customerName': customerName,

			},'运行中...').then(res => {
				this.records=res.data.data.records;
				this.hideModel();
			})
			
			
			
			},
			
			bh456(e) {
			console.log(e.detail.value);
			this.index456=e.detail.value;
			},
			bh789(e) {
			console.log(e.detail.value);
			this.index789=e.detail.value;
			},
			
			consumptionChange(e) {
			
			var cid=e.detail.value;
			console.log(this.consumption_list[cid].id);
			this.categoryId=this.consumption_list[cid].id;
			this.index=e.detail.value;
			},
			
			confirm(e) {
				var customerMobile=this.content;
				var customerName=this.content;
				var startDate=this.index456;
				var endDate=this.index789;
				var categoryId=this.categoryId;
				if(categoryId==''){
					console.log(123);
					var categoryId=this.consumption_list[0].id;
				}
				console.log(categoryId);
				console.log(customerMobile);
				console.log(customerName);
				console.log(startDate);
				console.log(endDate);
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/page', 'POST',{
					'current':1,
					'customerMobile': customerMobile,
					'customerName': customerName,
					'startDate': startDate,
					'endDate':endDate,
					'categoryId':categoryId
				},'运行中...').then(res => {
					this.records=res.data.data.records;
					this.hideModel();
				})
			},
			
			
			
			
			//点击显示底部弹出框函数
			click() {
			  this.showModel();
			},
			//显示对话框函数
			showModel () {
			  var animation = uni.createAnimation({
			    duration: 100,
			    timingFunction: "easein",
			    delay: 0
			  })
			  this.animation = animation
			  animation.translateY(2000).step()
			  this.animationData = animation.export(),
			 
			  setTimeout(function () {
			    animation.translateY(0).step()
				this.animationData =  animation.export();
				 this.showModalStatus = true;
			  }.bind(this), 200)
			},
			//隐藏对话框函数
			hideModel () {
			  var animation = uni.createAnimation({
			    duration: 200,
			    timingFunction: "linear",
			    delay: 0
			  })
			  this.animation = animation
			  animation.translateY(300).step()
			  this.animationData =  animation.export();
			  setTimeout(function () {
			    animation.translateY(0).step()
				this.animationData = animation.export(),
				this.showModalStatus = false;
			  }.bind(this), 200)
			}
		}
		
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	page{
		padding-bottom: 20rpx;
	}
	.card{
		border-radius: 20rpx;
	}
	.topPart{
		padding-bottom: 20rpx;
	}
	.dataBox{
		width: 100%;
		padding: 30rpx 0rpx;
		box-sizing: border-box;
	}
	.dataBox .dataItem{
		width: 25%;
		
	}
	.dataBox .dataItem .title{
		font-size: 20rpx;
		
	}
	.dataBox .dataItem .num{
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		color: #F9600D;
		margin-bottom: 15rpx;
	}
	
	.topPart .searchBox2{
		width: calc(100% - 123rpx);
	}
	.topPart .filter{
		color: #666;
	}
	.topPart .filter .icon{
		width: 28rpx;
		height: 28rpx;
		margin-left:10rpx ;
	}
	.userInfo{
		box-sizing: border-box;
		padding: 30rpx 30rpx 6rpx 30rpx;
	}
	.title_box4{
		border-bottom: 1rpx #eee solid;
		padding-bottom: 30rpx;
		margin-bottom: 24rpx;
	}
	.title_box4 .tb_left .icon{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.title_box4 .tb_left .name{
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: bold;
	}
	.title_box4 .tb_left .words .icon{
		width: 36rpx;
		height: 36rpx;
		border-radius: 0rpx;
		margin-left: 20rpx;
		
	}
	.userInfo .ifItem{
		width: 50%;
		line-height: 36rpx;
		margin-bottom: 18rpx;
	}
	.userInfo .ifItem .title{
		color: #999;
		display: block;
	}

	.popupWindow {
	  height: 866rpx;
	  width: 100%;
	  overflow: hidden;
	  position: fixed;
	  bottom: 0;
	  left:0;
	  
	  background: #fff;
	  border-radius: 20rpx 20rpx 0 0;
	  box-sizing: border-box;
	}
	.popupWindow .title_box{
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #eee solid;
	}
	.popupWindow .title_box .close{
		width: 58rpx;
		height: 24rpx;
		color: #999999;
		line-height: 24rpx;
		border-radius: 0rpx;
	}
	.popupWindow  .title_box2{
		font-size: 28rpx;
		line-height: 28rpx;
		padding-bottom: 20rpx;
	}
	.picker{
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		color: #999;
		box-sizing: border-box;
		padding: 0 60rpx 0 20rpx;
		line-height: 60rpx;
	}
	.picker.short{
		width: calc((100% - 30rpx) / 2);
		
	}
	.picker .downArrow{
		right: 20rpx;
		margin-top: 0rpx;
		top: 20rpx;
	}

</style>
